<template>
  <div class="dashboard-container">
    <div class="hd">
      <div class="title">
        <svg-icon icon-class="tree" />读取已存配置</div>
    </div>
    <div class="bd">
      <div class="item">
        <div class="read-set">
          <el-select v-model="defaultSet" placeholder="请选择" @change="readSet">
            <el-option v-for="item in list" :key="item.value" :label="item.default_set!==null?item.name+' (默认配置)':item.name"
              :value="item.id" />
          </el-select>
        </div>
      </div>
    </div>
    <div class="bd">
      <div class="item disabled">
        <el-input v-model="set.name" :disabled="true">
          <template slot="prepend">配置名称</template>
        </el-input>
        <el-input v-model="set.ratio" :disabled="true">
          <template slot="prepend">分辨率</template>
        </el-input>
        <el-input v-model="set.width" :disabled="true">
          <template slot="prepend">文档宽度</template>
        </el-input>
        <el-input v-model="set.height" :disabled="true">
          <template slot="prepend">最大高度</template>
        </el-input>
        <el-input v-model="set.margin_top" :disabled="true">
          <template slot="prepend">首页预留</template>
        </el-input>
        <el-input v-model="set.margin_bottom" :disabled="true">
          <template slot="prepend">尾页预留</template>
        </el-input>
        <el-input v-model="set.margin" :disabled="true">
          <template slot="prepend">间距高度</template>
        </el-input>
        <el-input v-model="set.border_width" :disabled="true">
          <template slot="prepend">描边粗细</template>
        </el-input>
        <el-input v-model="set.border_color_r+'/'+set.border_color_g+'/'+set.border_color_b" :disabled="true">
          <template slot="prepend">描边颜色</template>
          <template slot="append"><span class="color-view" :style="'background: rgba('+set.border_color_r+','+set.border_color_g+','+set.border_color_b+',100); height: 10px; width: 10px;display: inline-block;'"></span></template>
        </el-input>
      </div>
    </div>
    <div class="bd">
      <div class="item">
        <el-checkbox label="绘制参考线" v-model="setInfo.guides" @change="setGuides()"></el-checkbox>
      </div>
    </div>
    <div class="bd">
      <div class="item">
        <div class="cartoon-button" @click="startCut()">开始处理</div>
      </div>
    </div>

    <div class="hd">
      <div class="title">
        <svg-icon icon-class="set" />小工具</div>
    </div>
    <div class="bd">
      <div class="item">
        <div class="cartoon-button" @click="copyToPrevDoc()">复制选区内容到上一文档</div>
      </div>
    </div>
    <div class="bd">
      <div class="item">
        <el-input v-model="newDocName">
          <template slot="prepend">漫画名</template>
        </el-input>
        <div class="cartoon-button" @click="creatNewDoc()">新建空白文档</div>
      </div>
    </div>
    <div class="bd" style="height: 40px; border-bottom: none;">
      <div class="item">
        {{processMessage}}
      </div>
    </div>
  </div>
</template>

<script>
import {
    psScrpit,
    psEvent
  } from 'adobe/CSInterface'

  import {
    addUsed
  } from '@/api/used'
  import {
    getSetList,
    addSet,
    updSet,
    delSet
  } from '@/api/set'
  export default {
    name: 'Cut',
    data() {
      return {
        set: {
          name: '基本设置',
          width: 1440,
          ratio: 300,
          height: 15000,
          margin_top: 2000,
          margin_bottom: 1500,
          margin: 600,
          border_width: 6,
          border_color_r: 0,
          border_color_g: 0,
          border_color_b: 0,
        },
        setInfo: {
          guides: true
        },
        newDocName: '',
        list: null,
        defaultSet: '',
        processMessage: '',
      }
    },
    watch: {
      list: function(Value, oldValue) {
        if (this.list !== null) {
          this.set = this.list[0]
          this.defaultSet = this.list[0].id
          for (var i = 0; i < this.list.length; i++) {
            if (this.list[i].default_set !== null) {
              this.defaultSet = this.list[i].id
              this.set = this.list[i]
            }
          }
        }
      }
    },
    created() {
      this.getlist();
      //开启流程监听
      var that = this;
      psScrpit.addEventListener("sendProcessMessage", function(Event) {
        that.processMessage = JSON.stringify(Event.data);
      });
    },
    destroyed() {
      //关闭流程监听
      psScrpit.removeEventListener("sendProcessMessage");
    },
    methods: {
      copyToPrevDoc() {
        psScrpit.evalScript("copyToPrevDoc()");
      },
      creatNewDoc() {
        var info = {
          name: this.set.name,
          width: this.set.width,
          height: this.set.height,
          ratio: this.set.ratio
        }
        if (this.newDocName !== '') {
          info.name = this.newDocName;
        }
        psScrpit.evalScript('creatNewDoc(' + JSON.stringify(info) + ');')
      },
      startCut() {
        this.processMessage = '开始处理...';
        psScrpit.evalScript('getDocInfo()', function(info) {
          //提交记录
          var psd = JSON.parse(info);
          var data = {
            category: 'cut',
            doc_name: psd.name,
            doc_id: psd.id
          }
          addUsed(data).then(response => {
            if (response) {

            } else {
              console.log('error')
              return false
            }
          }).catch((error) => {
            console.log(error)
          })
        });
        psScrpit.evalScript('startCut(' + JSON.stringify(this.set) + ',' + JSON.stringify(this.setInfo) + ');')
      },
      readSet(value) {
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].id === value) {
            this.set = this.list[i]
            this.defaultSet = this.list[i].id
          }
        }
      },
      getlist() {
        getSetList().then(
          response => {
            this.list = response.data
          }).catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-radio {
    .el-radio__inner {
      background: #999;
      border: 1px solid #141414;
    }
  }

  .el-input-group__append,
  .el-input-group__prepend {
    min-width: 70px;
  }

  .el-radio.is-checked {
    .el-radio__inner {
      background: #999;
      border: 1px solid #141414;
    }

    .el-radio__label {
      color: #fff;
    }
  }

  .checkbox {
    .el-checkbox {
      float: left;
      width: 30%;
      padding: 5px 0;
    }

    .cartoon-button {
      float: left;
      width: 70%;
    }
  }

  .checkbox:after {
    content: '';
    display: table;
    clear: both;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #ccc;
  }

  .el-checkbox__inner {
    background: #666;
    border-color: #141414;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #333;
    border-color: #141414;
  }

  .dashboard-container {
    .read-set {
      .el-select {
        width: 100%;

        .el-input__suffix {
          width: 28px;
          height: 28px;
          top: 0;
          right: 0;
          background: #424242;
          margin: 1px;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;

          span {

            i {
              width: 28px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              display: block;
            }
          }
        }
      }
    }

    .el-input {
      font-size: 12px;
      margin-bottom: 2px;

      .el-input-group__append,
      .el-input-group__prepend {
        padding: 0 10px;
        background: #464646;
        border-color: #1e1e1e;
        color: #dddddd;
      }

      .el-input__inner {
        background: #222222;
        color: #dddddd;
        border-color: #1e1e1e;
        height: 30px;
        line-height: 30px;
      }
    }

    .disabled .el-input {
      .el-input__inner {
        background: #464646;
        color: #dddddd;
        border-color: #1e1e1e;
        height: 30px;
        line-height: 30px;
      }
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      font-size: 12px;

      .hd {
        font-size: 12px;
        padding: 10px 15px;
        border-bottom: 1px solid #141414;
        border-top: 1px solid #454545;

        .svg-icon {
          margin-right: 5px;
        }
      }

      .bd {
        padding: 6px 15px;
        border-bottom: 1px solid #141414;
        border-top: 1px solid #454545;

        .cartoon-button {
          display: block;
          text-align: center;
          border: 1px solid #141414;
          height: 30px;
          line-height: 28px;
          padding: 0 10px;
          margin-bottom: 1px;
          border-radius: 4px;
          background: #4c4c4c;
          cursor: pointer;
        }

        .cartoon-button:hover {
          background: #222222;
        }

        .el-checkbox-group {
          margin-bottom: 10px;
        }

        .button-group {
          .cartoon-button {
            float: left;
            width: 25%;
          }

          .cartoon-button:first-child {
            float: left;
            width: 50%;
          }

          .cartoon-button:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
          }

          .cartoon-button:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }

        .button-group:after {
          content: '';
          display: table;
          clear: both;
        }
      }
    }

    &-text {
      font-size: 14px;
      line-height: 46px;
    }

  }
</style>
